﻿
///初始化地图

(function(window, document){
	var OLGIS = function(){
		this.version = '0.1';
		this.map = null;
		this.projection = 'EPSG:4326';
		this.center = [116.37, 39.41];
		this.tdtLayer = null;//影像图
		this.baseLayer = null;//矢量图（OSM底图）
		this.dxtLayer = null;//地形图
		this.wptLayer = null;//卫片图
		this.sxtLayer = null;//水系图
		this.zwtLayer = null;//植物图
		this.dwtLayer = null;//动物图
		this.gnqhtLayer = null;//功能区划图
		this.gnqwtLayer = null;//功能区位图
		this.rhyxLayer = null;//融合影像2.5m
		this.vector = null;
		this.jsoncount =1;
		this.layerlist = [];
		this.layercount = 0;
	};

	OLGIS.prototype = {
		//默认WGS84
		initMap: function(id) {
			var view = new ol.View({
				projection: this.projection,
				//center: ol.proj.transform(this.center, 'EPSG:4326', 'EPSG:3857'),
				center: this.center,
				zoom: 6
			});
			this.map = new ol.Map({
                layers: [],
                view: view,
                target: id,
                controls: ol.control.defaults({
                	attribution: false,
                	zoom: false
                })
            });
			
		},
		addBaseLayer: function() {
			baseLayer = new ol.layer.Tile({
				source: new ol.source.OSM(),
			});
			baseLayer.set("osml", "底图");
			
			this.layerlist.push(["osml","底图", baseLayer]);
			
			baseLayer.setZIndex(this.layercount++);
			this.map.addLayer(baseLayer);
			
			return baseLayer;
		},
		addTDTLayer: function() {
			tdtLayer = new ol.layer.Tile({
				source: new ol.source.TileArcGISRest({
					//
                    url:'http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
                    crossOrigin: 'anonymous'
				})
			});
			this.layerlist.push(["arcgisl", "卫星图", tdtLayer]);
			tdtLayer.set("arcgisl", "卫星图", tdtLayer);
			tdtLayer.setZIndex(this.layercount++);
			this.map.addLayer(tdtLayer);
			return tdtLayer;
		},
		///geojson数据图层
		addGeojsonLayer: function(layername, geojsonObject){	
	
			var jsonSource = new ol.source.Vector({
  				features: geojsonObject ? (new ol.format.GeoJSON()).readFeatures(geojsonObject) : null
					});
	
				var jsonLayer = new ol.layer.Vector({
  												source: jsonSource
  												//style: null
				});		
				
				this.layerlist.push([this.jsoncount, layername, jsonLayer]);
				jsonLayer.setZIndex(this.layercount++);
				this.map.addLayer(jsonLayer);	
				this.jsoncount ++;
				return jsonLayer;
		},
		///geojson数据图层
		addGeojsonLayerByUrl: function(layername, url, styleCall){
	
			var jsonLayer2 = new ol.layer.Vector({
					source: new ol.source.Vector({
          						url: url,
          						format: new ol.format.GeoJSON(),
          						projection: 'EPSG:4326',
          						wrapX: false
        						}),
					style: styleCall
      		});
      		this.layerlist.push([this.jsoncount, layername, jsonLayer2]);
			jsonLayer2.setZIndex(this.layercount++);
			this.map.addLayer(jsonLayer2);
			this.jsoncount ++;
			return jsonLayer2;
		},

		///geojson数据图层
		addkmlLayerByUrl: function(layername, url){

			var kmlLayer = new ol.layer.Vector({
				source: new ol.source.Vector({
					url: url,
					format: new ol.format.KML(),
					projection: 'EPSG:4326',
					wrapX: false
				})
			});
			this.layerlist.push([this.jsoncount, layername, kmlLayer]);
			kmlLayer.setZIndex(this.layercount++);
			this.map.addLayer(kmlLayer);
			this.jsoncount ++;
			return kmlLayer;
		},

		addWFSLayer: function(){
			vector = new ol.layer.Vector({
		      source: new ol.source.Vector({
		        format: new ol.format.GeoJSON(),
		        url: 'http://localhost:9000/geoserver/wfs?service=wfs&version=1.1.0&request=GetFeature&typeNames=nyc_roads:nyc_roads&outputFormat=application/json&srsname=EPSG:4326'
		      }),
		      style: function(feature, resolution) {
		        return new ol.style.Style({
		          stroke: new ol.style.Stroke({
		            color: 'blue',
		            width: 1
		          })
		        });
		      }
		    });
			this.map.addLayer(vector);
		},
		//地形图
		addDXT:function(){
//			 var format = 'image/png';
//		      var bounds = [132.08686470556336, 46.66014672834982,
//		                    133.03356118783964, 46.980013059879106];
//			
//		      dxtLayer = new ol.layer.Tile({
//		        source: new ol.source.TileWMS({
//		            url: 'http://127.0.0.1:8080/geoserver/wlp/wms',
//		            params: {'FORMAT': format, 
//		                     'VERSION': '1.1.1',
//		                     tiled: true,
//		                  STYLES: '',
//		                  LAYERS: 'wlp:dxt',
//		            }
//		       })
//		      });
//			this.map.addLayer(dxtLayer);
			
			
			dxtLayer = new ol.layer.Tile({
	            source: new ol.source.TileWMS({
	                url: 'http://localhost:8080/geoserver/gwc/service/wms?',
	                params: {
	                    'FORMAT': "image/png",
	                    'VERSION': '1.1.1',
	                    tiled: true,
	                    STYLES: '',
	                    LAYERS: 'wlp:cacheTest',
	                }
	            })
	        });
			this.map.addLayer(dxtLayer);
		},
		//卫片图
		addWPT:function(){
			var format = 'image/png';
		    var bounds = [132.1803953511738, 46.71247826561369,
		                    132.97943159504618, 46.90389702406175];
		    wptLayer = new ol.layer.Tile({
				source: new ol.source.TileWMS({
		          url: 'http://localhost:8080/geoserver/wlp/wms',
		          params: {'FORMAT': format, 
		                   'VERSION': '1.1.1',
		                   tiled: true,
		                STYLES: '',
		                LAYERS: 'wlp:wlp_wpt',
		          }
		        })
		      });
			this.map.addLayer(wptLayer);
		},
		//水系图
		addSXT:function(){
			var format = 'image/png';
		    var bounds = [132.07459813226305, 46.64622604520168,
		                    133.05506712896022, 46.98569287170365];
		    
		    sxtLayer = new ol.layer.Tile({
		    	source: new ol.source.TileWMS({
		            url: 'http://localhost:8080/geoserver/wlp/wms',
		            params: {'FORMAT': format, 
		                     'VERSION': '1.1.1',
		                     tiled: true,
		                  STYLES: '',
		                  LAYERS: 'wlp:sxt',
		            }
		          })
		      });
			this.map.addLayer(sxtLayer);
		},
		//植物图
		addZWT:function(){
			var format = 'image/png';
		    var bounds = [132.07309805655825, 46.6532130433919,
		                    133.04802919809484, 46.98154208921369];
		    zwtLayer = new ol.layer.Tile({
		    	source: new ol.source.TileWMS({
		            url: 'http://localhost:8080/geoserver/wlp/wms',
		            params: {'FORMAT': format, 
		                     'VERSION': '1.1.1',
		                     tiled: true,
		                  STYLES: '',
		                  LAYERS: 'wlp:zwt',
		            }
		          })
		      });
			this.map.addLayer(zwtLayer);
		},
		//动物图
		addDWT:function(){
			var format = 'image/png';
		    var bounds = [132.07138597658698, 46.652038928807215,
		                    133.04875936363038, 46.98699662777616];
		    dwtLayer = new ol.layer.Tile({
		    	source: new ol.source.TileWMS({
		            url: 'http://localhost:8080/geoserver/wlp/wms',
		            params: {'FORMAT': format, 
		                     'VERSION': '1.1.1',
		                     tiled: true,
		                  STYLES: '',
		                  LAYERS: 'wlp:dwt',
		            }
		         })
		      });
			this.map.addLayer(dwtLayer);
		},
		//功能区划图
		addGNQ:function(){
			var format = 'image/png';
		    var bounds = [132.0731342786162, 46.62625334594499,
		                    133.05699634604846, 46.96372365614827];
		    gnqhtLayer = new ol.layer.Tile({
		    	source: new ol.source.TileWMS({
		            url: 'http://localhost:8080/geoserver/wlp/wms',
		            params: {'FORMAT': format, 
		                     'VERSION': '1.1.1',
		                     tiled: true,
		                  STYLES: '',
		                  LAYERS: 'wlp:gnq',
		            }
		          })
		      });
			this.map.addLayer(gnqhtLayer);
		},
		//功能区位图
		addGNQWT:function(){
			 var format = 'image/png';
		      var bounds = [132.07611737785095, 46.625089207967115,
		                    133.05510319034002, 46.96381812141769];
		      gnqwtLayer = new ol.layer.Tile({
		    	  source: new ol.source.TileWMS({
		              url: 'http://localhost:8080/geoserver/wlp/wms',
		              params: {'FORMAT': format, 
		                       'VERSION': '1.1.1',
		                       tiled: true,
		                    STYLES: '',
		                    LAYERS: 'wlp:gnqwt',
		              }
		            })
			      });
				this.map.addLayer(gnqwtLayer);
		},
		//融合影响2.5m
		addRHYX:function(){
			var format = 'image/png';
		    var bounds = [131.50732073519941, 46.78146370409238,
		                    131.96193137620818, 47.10914615851389];
		    rhyxLayer = new ol.layer.Tile({
		    	source: new ol.source.TileWMS({
		            url: 'http://localhost:8080/geoserver/wlp/wms',
		            params: {'FORMAT': format, 
		                     'VERSION': '1.1.1',
		                     tiled: true,
		                  STYLES: '',
		                  LAYERS: 'wlp:rhyx',
		            }
		          })
		      });
			this.map.addLayer(rhyxLayer);
		},
		
		///空数据图层
		addNodesLayer:function(){		
	
			var nodeLayer = new ol.layer.Vector({
  											source: new ol.source.Vector(),
  											style: overlayStyle
			});	
			
			nodeLayer.set("nodesl", "节点图");
			this.layerlist.push(["nodesl", "节点图", nodeLayer]);
			nodeLayer.setZIndex(this.layercount++);
			this.map.addLayer(nodeLayer);				
			return nodeLayer;
		},		
		
		addPopOverlay:function(popId){
			var element_over = document.getElementById(popId);

			var popup = new ol.Overlay({
									id:popId,
									element : element_over,
									positioning: 'bottom-center',
									stopEvent:false,
									offset:[0,-10]		
				});
				this.map.addOverlay(popup);	
			return popup;
		},
		
		///添加工具条
		addMapToolbar:function(tools){		
	
			setMapToolbar(tools);
		},
		
		///添加图层列表
		showLayerTree:function(){		
	
			setMapLayerTree();
		},
		
		///鼠标控件
		addMapMouseControl:function(tools){		
	
			 var mouseControl = new ol.control.MousePosition({
            projection: 'EPSG:4326',
            coordinateFormat: ol.coordinate.createStringXY(5)
        });
        this.map.addControl(mouseControl);
		},
		
		///比例尺控件
		addMapScaleLine:function(layers){		
	
			  var scaleLine = new ol.control.ScaleLine();
			  map.addControl(scaleLine);
		},
		
		///获取图层对象ollayer
		getMapLayer:function(layerId){	
	 		 for (var i = 0 ; i < this.layerlist.length; i++) {
	 		 	
	          var layer = this.layerlist[i];
	          
	           if(layer[0] == layerId){
	           	
	           	return layer[2];
	           }					
				}
				return null;
		}
		        
	}
	window.OLGIS = OLGIS;
})(window, document);


///加载工具
function setMapToolbar(tools){
	
	var toolbarlhtml = '<div id="map-zoom" class="btn-group-vertical " role="group">'
	for(var i =0; i< tools.length; i++)
	{
		if(tools[i] == "zoomOut" ){
			toolbarlhtml += '<span id="zoomOut" class="btn btn-primary text-btn" ><i class="icon-plus" ></i></span>'
			
		}
		else if(tools[i] == "zoomIn" ){
			toolbarlhtml += '<span id="zoomIn" class="btn btn-primary text-btn"><i class="icon-minus"></i></span>'
			
		}
		else if(tools[i] == "dragIn" ){
			toolbarlhtml += '<span id="dragIn" class="btn btn-primary text-btn"><i class="icon-zoom-in"></i></span>'
			
		}
		else if(tools[i] == "save" ){
			toolbarlhtml += '<span id="save" onclick="showInfoModalForm()" class="btn btn-primary text-btn" flag="">保存</span>'
		}
		else if(tools[i] == "drawPoint" ){
			toolbarlhtml += '<span id="drawPoint" onclick="drawGeom.createDrawInteraction(' + "'Point'" + ')" class="btn btn-primary text-btn">点</span>'
		}
		else if(tools[i] == "drawLine" ){
			toolbarlhtml += '<span id="drawLine" class="btn btn-primary text-btn" onclick="drawGeom.createDrawInteraction(' + "'Line'" + ')">线</span>'
		}
		else if(tools[i] == "drawSurface" ){
			toolbarlhtml += '<span id="drawSurface" onclick="drawGeom.createDrawInteraction(' + "'Polygon'" + ')" class="btn btn-primary text-btn">面</span>'
		}
		else if(tools[i] == "measureLength" ){
			toolbarlhtml += '<span id="measureLine" onclick="measureUtil.measure('+ "'LineString'" + ')" class="btn btn-primary text-btn" style="width: 80px;">测量长度</span>'
		}
		else if(tools[i] == "measureArea" ){
			toolbarlhtml += '<span id="measureArea" onclick="measureUtil.measure('+ "'Polygon'" + ')" class="btn btn-primary text-btn" style="width: 80px;">测量面积</span>'
		}
		else if(tools[i] == "clearMeasure" ){
			toolbarlhtml += '<span onclick="measureUtil.clearLayer()" class="btn btn-primary text-btn" style="width: 80px;">清除测量</span>'
		}
		else if(tools[i] == "clearSecelted" ){
			toolbarlhtml += '<span onclick="clearSecelted()" class="btn btn-primary text-btn" style="width: 80px;">清除高亮</span>'
		}
		else if(tools[i] == "download" ){
			toolbarlhtml += '<span onclick="downloadImage('+ "'map'" + ')" class="btn btn-primary text-btn" style="width: 80px;">地图下载</span>'
		}
		else if(tools[i] == "reset" ){
			toolbarlhtml += '<span onclick="resetCmd()" class="btn btn-primary text-btn" >重置</span>'
		}
		else if(tools[i] == "viewIn" ){
			toolbarlhtml += '<span id="viewIn" class="btn btn-primary ol-map-position text-btn"><i class="icon-globe"></i></span>'
		}
	}
	toolbarlhtml += '</div>'
	$('.map-control').html(toolbarlhtml);
	mapUtil.zoomOut();
	mapUtil.zoomIn();
	mapUtil.initdragZoom();
	mapUtil.viewIn();
	
	
}
                  
                  
function setMapLayerTree(){
	
		var layerTreelhtml = '<div class="list-btn" id="list-btn">'
            					 			+ '<span class="fadeBtn in" title="显示/隐藏"></span>'
       									+ '</div>'
        							+'<div class="list-box clearfix open" id="list-box">'
            +'<div class="box_a" style="width:380px;max-height:400px;overflow:auto;">'          
                + '<div id="zhongguoqingzaixl" class="accordioned_v fb_a" onclick="tabChanged(3)">图层列表</div>'
                + '<div class="flexible-panel" id="zhonguoqingzaiqingkuangxl">'
                	 + '<table border="1" class="table table-hover table-bordered" style="margin-bottom:0;">'
	                    + '<thead>'
	                   + '<tr>'
	                        + '<th style="width: 80px;">显示/隐藏 </th>'
	                        + '<th >图层名称</th>'
	                        + '<th style="width: 45px;">置顶</th>'
	                    + '</tr>'
	                    + '</thead>'
	                    + '<tbody>';
	                    
	                    ///添加图层
	                    
	                    	var layers = window.olGis.layerlist;//map.getLayers();
	                    	var checked = true;
	              	      for (var i = layers.length -1; i >= 0; i--) {
	              	      	
	              	      	 var layer = layers[i];
	              	      	 if(layer[0] == "nodesl"){
	              	      	 	continue;
	              	      	 }
	              	      	//layers2[i].getKey();
	              	      	 // code to be executed
	              	      	  var trLayer = '<tr>'
		                    		+ '<td class="align-center"><input id="vectorChk"  onclick="checkLayer(this, ' + "'" + layer[0] + "'" + ')" type="checkbox" checked="checked"></td>'
														+ '<td>'+layer[1]+'</td>'
														+ '<td class="align-center"><input onclick="upSlt(this, ' + "'" + layer[0] + "'" + ')" type="radio" name="ztop" ';
														if(checked){
															trLayer += 'checked="checked"';
															checked = false;
														}
														trLayer += '></td></tr>';
	       										
	       										layerTreelhtml += trLayer;
	              	      }
	                                  	
	                    	
	            layerTreelhtml +=  '</tbody>'
	                + '</table>'
                + '</div>'
                
                + '<div id="zhongguoqingzai" class="accordioned fb_a" onclick="tabChanged(1)">经纬度定位</div>'
                + '<div class="flexible-panel" id="zhonguoqingzaiqingkuang">'
                	
	                   +  '<div class="form-inline" style="    padding: 40px 0 40px 0;height:100px;">'
		                   +  '<div class="form-group" style="margin-left: 15px;">'
		                      +   '<label class="no-font-weight" for="lon">经度:</label>'
		                     +   ' <input id="lon" class="form-control input-sm" style="height:25px;width:80px;" name="listenArea">'
		                   +  '</div>'
		                   +  '<div class="form-group" style="margin-left: 15px;">'
		                      +   '<label class="no-font-weight" for="lat">纬度:</label>'
		                      +  ' <input id="lat" class="form-control input-sm" style="height:25px;width:80px;" name="listenArea">'
		                   +  '</div>'
		                   +  '<input class="btn btn-success btn-sm" onclick="positionPark()" type="button" name="queryBtn" '
		                   +  	'value="定位" style="margin-left: 10px;height:25px;padding-top: 3px;" >'
		               +  '</div>'
                + '</div>'
                
           +  '</div>'
       +  '</div>';
       $('#list-container').html(layerTreelhtml); 
       
       	$('#list-btn').click(function(){
	
    				if ($('#list-box').hasClass('flag')) {

       					$('#list-box').removeClass('flag').addClass('open');
        				$('.fadeBtn').addClass('in').removeClass('out');
       					$('#list-container').animate({right: '-0'}, 'slow');
   					} else {
        
       					$('#list-box').removeClass('open').addClass('flag');
        				$('.fadeBtn').removeClass('in').addClass('out');
        				$('#list-container').animate({right: '+0'}, 'slow');
   					}
				});
				$('#zhonguoqingzaiqingkuangxl').show();
}



/**
 * [点击叶窗触发事件]
 * @AuthorHTL 
 * @DateTime  2017-08-06T16:33:58+0800
 * @param     {[number]}
 */
 function tabChanged(tabindex) {
     switch (tabindex) {
         case 1:
        	 $("#zhonguoqingzaiqingkuang").panelToggle('flexible-panel');
             break;
         case 3:
        	 $("#zhonguoqingzaiqingkuangxl").panelToggle('flexible-panel');
             break;
     }
     resizeBtnMiddle();
 }

//	addSelectAction(map);


